<template>
  <div id="login_bg">
    <div class="login_wrapper">
      <div class="login_header">
        <a href="h/"><img src="./image/logo_white.png" width="285" height="62" alt="易小聘"/></a>
      </div>

      <div class="login_box">
        <div>
          <el-button name="type" @click="userRegister">求职者注册</el-button>
          <el-button  name="type" @click="hrRegister">Hr注册</el-button>
        </div>

        <el-form v-if="isUser" :model="user" :rules="rules" ref="form.user"
                   label-width="100px">
            <el-form-item label="用户名" prop="name" >
              <el-input v-model="user.userName" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="user.password" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="就业方向" prop="region">
              <jobClassify v-on:job="getJobClick"></jobClassify>
            </el-form-item>
            <el-form-item label="工作经验" prop="region">
              <el-select v-model="user.workExp" placeholder="请选择工作经验">
                <el-option label="在校" value="在校"></el-option>
                <el-option label="应届生" value="应届生"></el-option>
                <el-option label="1年以内" value="1年以内"></el-option>
                <el-option label="1-3年" value="1-3年"></el-option>
                <el-option label="3-5年" value="3-5年"></el-option>
                <el-option label="5年之上" value="5年之上"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUser">立即注册</el-button>
            </el-form-item>
          </el-form>

        <el-form v-if="isHr" :model="hr" :rules="rules" ref="hr" label-width="100px" class="loginForm">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="hr.hruserName" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="hr.hrPassword" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="password">
            <el-input v-model="hr.name" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="resource">
            <el-radio-group v-model="hr.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="hr.hrTelephone" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitHr">立即创建</el-button>
          </el-form-item>
        </el-form>

        <div class="login_right">
          <div>已有易小聘帐号？</div>
          <a href="register" class="registor_now">
            <router-link to="login">立即登录</router-link>
          </a>
        </div>
      </div>
      <div class="login_box_btm"></div>
    </div>
  </div>
</template>

<script>
  import jobClassify from '../jobclassify/Jobclassify'
  export default {
    name: "register",

    components:{
      jobClassify
    },
    data() {
      return {
        isUser: true,
        isHr: false,
        user: {
          userName: '',//用户名
          password: '',//密码
          jobClassify: '',//就业方向
          workExp: ''//工作经验
        },
        hr: {
          hruserName: '',//用户名
          hrPassword: '',//hr密码
          name: '',//姓名
          sex: '',//性别
          hrTelephone: '',//电话号码

        },
        rules: {}
      }
    },
    methods:{
      getJobClick:function (getJobClick) {
        console.log(getJobClick);
        this.user.jobClassify=getJobClick;
      },
      userRegister(){
        this.isUser=true;
        this.isHr=false
      },
      hrRegister(){
        this.isHr=true
        this.isUser=false
      },


      submitUser(){

        this.$ajax.post(this.$config.url+"LoginRegister/userRegister", this.user).then(res => {
          if(res.data==="succ"){
            this.$message.success("注册成功")
          }else if(res.data==="已存在该用户"){
            this.$message.warning("该用户名已注册")
          }else{
            this.$message.error("出错了")
          }

        })
      },
      submitHr(){

        this.$ajax.post(this.$config.url+"LoginRegister/hrRegister", this.hr).then(res => {
          if(res.data==="succ"){
            this.$message.success("注册成功")
          }else if(res.data==="已存在该用户"){
            this.$message.warning("该用户名已注册")
          }else{
            this.$message.error("出错了")
          }

        })
      }
    }
  }
</script>

<style scoped>
  #login_bg {
      background: #019875 url(image/bgwall.png) center 700px no-repeat;
      overflow: hidden;
      height: 100%;
    }

  .login_wrapper {
    width: 600px;
    margin: 0 auto;
    color: #777;
    font-size: 16px;
    padding-top: 1px;
  }

  .login_header {
    position: relative;
    margin-bottom: 20px;
  }

  .login_header img {
    margin: 30px 0 0 20px;
  }

  #cloud_s {
    position: absolute;
    left: 375px;
    top: 15px;
  }

  #cloud_m {
    position: absolute;
    left: 470px;
    top: -35px;
  }

  .login_box {
    min-height: 150px;
    background: #eafffd;
    padding: 40px;
    overflow: hidden;
  }

  .login_box_btm {
    background: url(image/login_btm.png) repeat-x;
    height: 10px;
  }

  #loginForm {
    width: 360px;
    margin: 0;
    border-right: 1px dashed #999;
    float: left;
  }

  #loginForm a {
    color: #019875;
  }



  #loginForm input:focus {
    border: 2px solid #fff;
    -webkit-box-shadow: 0px 0px 4px #b5f0e7;
    -moz-box-shadow: 0px 0px 4px #b5f0e7;
    box-shadow: 0px 0px 4px #b5f0e7;
  }

  #loginForm .fr {
    color: #777;
    margin-right: 45px;
  }

  #loginForm .fr:hover {
    color: #019875;
  }

  #loginForm label {
    vertical-align: top;
  }

  /**add nancy**/
  .registerJianJu {
    *height: 36px;
  }

  #loginForm input[type="checkbox"] {
    margin-bottom: 20px;
    border: none;
    background: none
  }

  #submitLogin {
    width: 155px;
    height: 46px;
    font-size: 16px;
    line-height: 46px;
    clear: both;
    float: left;
    background: #019875;
    color: #fff;
    border: none;
    text-align: center;
  }

  .submitLogin {
    width: 155px;
    height: 46px;
    font-size: 16px;
    line-height: 46px;
    clear: both;
    float: left;
    background: #019875;
    color: #fff;
    border: none;
    text-align: center;
  }

  #submitLogin:hover {
    background: #00694e;
  }

  .login_right {
    *width: 170px;
    float: left;
    margin: 10px 0 0 30px;
    line-height: 30px;
  }

  .registor_now {
    color: #019875;
    background: url(./image/registor_now.png) right center no-repeat;
    padding-right: 24px;
    float: left;
    height: 30px;
    line-height: 30px;
  }

  .registor_now:hover {
    color: #019875;
    text-decoration: underline;
  }

  .login_others {
    clear: both;
    margin: 70px 0 10px 0;
  }

  .login_wrapper input[type="text"], .login_wrapper input[type="password"] {
    margin: 0 0 20px 0;
    border: none;
  }

  .login_wrapper span.error {
    margin: -10px 0 10px 0;
  }

  #loginForm input[type="text"], #loginForm input[type="password"] {
    margin: 0 0 20px 0;
  }

  #loginForm span.error {
    margin: -10px 0 10px 0;
  }

  .login_box h1 {
    font-size: 24px;
    font-weight: normal;
    color: #555;
    margin: 0px 0 20px 0;
  }

  .login_box h2 {
    font-size: 18px;
    font-weight: normal;
    color: #555;
    margin: 0 0 15px 0;
  }

  .login_box h3 {
    font-size: 20px;
    font-weight: normal;
    color: #555;
    margin: 0 0 25px 0;
  }

  .login_box .typeBtn {
    float: left;
    width: 160px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    background: #0d9572;
    padding: 10px 0;
    margin: 0 30px 20px 2px;
  }

  .login_box .typeBtn:hover {
    background: #00694e;
  }

  .el-radio-button {
    margin: 0 auto;
  }

  .el-from-register {
    weight: 200px
  }

</style>